<template>

	<view class="page" v-show="show">
		<view class="name">
			{{session.name}}
		</view>

		<view class="organizer pv-20">
			<view class="redText pv-20">
				Session Organizers
			</view>

			<view v-for="(item,index) in session.organizer" :key="index" class="organizerItem">

				<image :src="item.avatar" mode="aspectFit" class="avatar"></image>

				<view class="info">
					<view class="name boldText pt-20">
						{{item.first_name}} {{item.last_name}}
					</view>
					<view class="institute pt-20">
						{{item.institute}}
					</view>
				</view>
			</view>
		</view>


		<view class="chairman pv-20">
			<view class="redText pv-20">
				Session Chairs
			</view>
			<view v-for="(item,index) in session.chairman" :key="index" class="organizerItem">

				<image :src="item.avatar" mode="aspectFit" class="avatar"></image>

				<view class="info">
					<view class="name boldText pt-20">
						{{item.first_name}} {{item.last_name}}
					</view>
					<view class="institute pt-20">
						{{item.institute}}
					</view>
				</view>
			</view>
		</view>


		<view class="information pv-20">

			<view class="redText pv-20">
				Session Information
			</view>


			<view class="content">

				<view v-html="session.notes">

				</view>
			</view>
		</view>


		<view class="information pv-20">

			<view class="redText pv-20">
				Submitted Articles
			</view>
			<view class="content" style="color: #737373;">
				<view class="">
					Note: The following submitted articles are not guaranteed to be scheduled in the final program at
					this stage. The final presentation type and arranged session will be decided by Technical Program
					Committee.
				</view>
				<view class="">
					Note: +: Presenting Author, *: Corresponding Author
				</view>
			</view>
		</view>




		<view class="paper">

			<view class="paperItem" v-for="p in session.paper" :key="p.paper_id">

				<uni-card :is-shadow="false">




					<view class="organizerItem" style="position: relative;">
						<image v-for="(pa,indexPa) in p.pa" :key="indexPa" mode="aspectFit" class="avatar"
							:src="pa.avatar"></image>

						<view class="paperTime" style="padding-left: 100rpx;">
							<view class=" pv-20">{{p.time}}</view>
							<text class="redText boldText">{{p.invited == "No" ? "":p.invited}}</text>

						</view>




						<view class="notification">
							<uni-icons v-if="isInHeartList(p)" type="heart-filled" size="30" style="color: #a31953;"
								@click="cancelHeartFn(session,p)"></uni-icons>
							<uni-icons v-else type="heart" size="30" @click="setHeartFn(session,p)"></uni-icons>
						</view>
					</view>

					<view class="paper_title boldText pt-20">
						{{p.title}}
					</view>

					<view class="author pt-20">
						<view v-for="(author,indexAuthor) in p.author" :key="indexAuthor"
							style="padding-bottom: 10rpx;">
							<text class="redText" v-if="author.people_id == p.pa[0]?.people_id">+*</text>
							<text class="redText pr-20" @click="authorClick(author)">{{author.first_name}}
								{{author.last_name}}</text>
							<text>({{author.institute}})</text>
						</view>
					</view>


					<!-- 	<view class="abstract redText" @click="ViewAbstract(p)">
					[View Abstract]
				</view> -->

					<view class="session_info">
						<view>
							{{session.nb}}
						</view>
						<view>
							{{session.session_date}}
						</view>
						<view>
							{{session.am_pm}}
						</view>
						<view>
							Room: {{session.room}}
						</view>
					</view>


				</uni-card>
			</view>

		</view>





	</view>
</template>

<script>
	import {
		request
	} from '../../utils/request.js'

	import {
		setHeartList,
		getHeartList,
		cancelHeart
	}
	from '../../utils/storage.js'

	import {
		addCalendar
	}
	from './addCanlendar.js'


	export default {
		data() {
			return {
				session: {},
				show: false,
				session_id: '',
				heartList: Object.freeze([])
			}
		},
		onLoad(options) {

			this.session_id = options.session_id;
			this.getSessionDetail();
			this.getHeartListFn();
		},
		onPullDownRefresh() {
			this.getSessionDetail(

			);
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000)
		},
		methods: {
			getSessionDetail() {
				request(`https://author2025b.piers.org/jsapi/session/detail?id=${this.session_id}`).then(data => {
					this.session = data.data;
					this.session.organizer = this.session.organizer.filter(item => {
						return item != null
					})
					this.session.chairman = this.session.chairman.filter(item => {
						return item != null
					})
					this.show = true;
				})
			},
			authorClick(man) {
				
				uni.navigateTo({
					url: `/pages/webView/webView?type=user&uid=${man.people_id}`
				})
			
			},
			ViewAbstract(p) {
				uni.navigateTo({
					url: `/pages/webView/webView?src=${encodeURIComponent(JSON.stringify("https://chiba2025.piers.org/preview.html?uid="+p.paper_id))}`
				})
			},
			setHeartFn(session, paper) {
				let data = {
					dtstart: new Date(`${session.session_date} ${paper.time}`).valueOf(),
					dtend: new Date(`${session.session_date} ${paper.time}`).valueOf(),
					title: paper.title,
					description: `
					${session.session_date} ${paper.time} ${session.am_pm} 
					${session.nb}  
					Room: ${session.room}`
				}



				// #ifdef APP
				addCalendar(data)
				// #endif


				setHeartList({
					paper_id: paper.paper_id,
					paper: paper,
					session_id: session.session_id,
					nb: session.nb,
					session_date: session.session_date,
					am_pm: session.am_pm,
					room: session.room


				})
				this.getHeartListFn();
			},

			getHeartListFn(session, paper) {

				this.heartList = getHeartList();

			},
			cancelHeartFn(session, paper) {
				cancelHeart(paper);
				this.getHeartListFn();
			},

			isInHeartList(paper) {
				let has = false;
				this.heartList.map(session => {
					if (session.paper_id == paper.paper_id) {
						has = true;
					}
				})

				return has;
			}
		}
	}
</script>

<style lang="less" scoped>
	.paperItem {
		position: relative;
	}

	.paper {
		position: relative;
	}

	.organizerItem {
		display: flex;
		padding-top: 20rpx;

		.info {
			flex: 1;
			padding-left: 20rpx;
		}
	}

	.avatar {
		display: flex;
	}

	.notification {
		position: absolute;
		top: 20rpx;
		right: 0rpx;
	}
</style>